<template>
	<view class="out_box">
		<h1 class="title">标题</h1>
		<image class="img" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg"></image>
		<text class="detail">饭后趴一趴，能活一万八;春眠不觉晓，处处蚊子咬</text>
		<!-- 按钮和留言 -->
		<view class="feedback">
			<!-- 点赞按钮 -->
			<uni-badge class="uni-badge-left-margin" type="success" :text="likeNum" absolute="rightTop" size="small"
				@click="clickHandle()">
				<image src="/static/pageTow/like.png"></image>
				<text class="box-text">点赞</text>
			</uni-badge>
			<!-- 踩 -->
			<uni-badge class="uni-badge-left-margin" type="success" :text="dislike" absolute="rightTop" size="small">
				<image src="/static/pageTow/dislike.png"></image>
				<text class="box-text">踩</text>
			</uni-badge>
			<!-- 收藏 -->
			<uni-badge class="uni-badge-left-margin" type="error" :text="collectNum" absolute="rightTop" size="small">
				<image src="/static/pageTow/sc.png"></image>
				<text class="box-text">收藏</text>
			</uni-badge>
			<!-- 留言 -->
			<div class="liuyan">
				<div class="user_item">
					<image class="avatar" src="/static/pageTow/img.png"></image>
					<div class="content">
						<s class="name">张三</s>
						<text class="datetime">2065-02-12 12:12:12</text>
					</div>
					<div class="text">留言内容</div>
				</div>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail: {},
				// 按钮
				likeNum: 100,
				dislike: 100,
				collectNum: 100,
			}
		},
		onLoad(option) {
			// 示例用法
			const exampleTime = new Date("2023-04-05T14:30:00"); // 或者 "2023-04-05T14:30:00"，确保字符串格式符合ISO 8601标准
			console.log(this.isTimeInCurrentDay(exampleTime)); // 输出: true 或 false

			const eventChannel = this.getOpenerEventChannel();
			// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			// eventChannel.on('acceptDataFromOpenerPage', function(data) {
			// 	console.log(JSON.parse(data))
			// })
		},
		methods: {
			clickHandle(btnType) {
				// 在当天内，若未点击，点击则在原来基础上加1；否则，减少1
				// 
			},
			/**
			 * 判断某个时间是否在当前日期内。
			 * @param {Date} someTime 需要判断的时间，应为JavaScript的Date对象。
			 * @returns {boolean} 如果在当前日期内，则返回true；否则返回false。
			 */
			isTimeInCurrentDay(someTime) {


				// 获取当前日期的年月日部分
				const today = new Date();
				const currentYear = today.getFullYear();
				const currentMonth = today.getMonth();
				const currentDay = today.getDate();

				// 设置当前时间的小时、分钟、秒和毫秒为0，以便只比较日期部分
				today.setHours(0, 0, 0, 0);

				// 如果someTime是一个字符串，先将其转换为Date对象
				if (typeof someTime === 'string') {
					someTime = new Date(someTime);
				}

				// 设置someTime的小时、分钟、秒和毫秒为0，以便只比较日期部分
				someTime.setHours(0, 0, 0, 0);

				// 比较年月日是否相同
				return someTime.getFullYear() === currentYear &&
					someTime.getMonth() === currentMonth &&
					someTime.getDate() === currentDay;
			}
		}
	}
</script>

<style lang="scss">
	.out_box {
		margin: 0 8rpx;
	}

	.title {
		text-align: center;
	}

	.img {
		vertical-align: middle;
		width: 100%;
	}

	.detail {
		font-style: italic;
	}

	/* 按钮和留言 */
	.feedback {
		position: fixed;
		bottom: 30rpx;
		width: 100%;
		min-height: 250px;
		margin-top: 60rpx;
		border: 1px solid black;
		// border-radius: 50rpx;
		display: flex;
		justify-content: space-evenly;
		flex-wrap: wrap;
		align-content: flex-start;

		uni-badge {
			width: 80rpx;
			height: 100rpx;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

		// 留言
		.liuyan {
			width: 100%;
			border-top: 1px dashed black;
			position: relative;
			padding: 30rpx;

			&::before {
				padding: 5rpx;
				content: '留言';
				position: absolute;
				top: -30rpx;
				left: 50%;
				background-color: gainsboro;
			}

			.user_item {
				.avatar {
					--img_s: 80rpx;
					width: var(--img_s);
					height: var(--img_s);
					border-radius: 50%;
				}

				.content {
					display: inline-block;
					margin-left: 10px;
					.datetime{
						font-size: 11px;
					}
				}
				.text{
					margin-left: 30px;
				}
			}
		}
	}
</style>